<template>
  <div class="about-container">
    <el-card class="about-card">
      <h2>关于 TinyPNG Pro</h2>
      
      <div class="about-section">
        <h3>项目介绍</h3>
        <p>TinyPNG Pro 是一个高效的批量图片压缩工具，旨在帮助用户快速压缩多张图片，同时保持图片质量。</p>
        <p>本工具使用 Vue.js 构建前端界面，Python Flask 提供后端服务，支持多种图片格式的压缩。</p>
      </div>
      
      <div class="about-section">
        <h3>主要功能</h3>
        <ul>
          <li>支持批量上传多张图片</li>
          <li>支持拖拽上传</li>
          <li>支持 PNG、JPG、GIF、WEBP 等多种格式</li>
          <li>提供高质量的图片压缩</li>
          <li>显示详细的压缩统计信息</li>
          <li>支持单张或批量下载压缩后的图片</li>
        </ul>
      </div>
      
      <div class="about-section">
        <h3>技术栈</h3>
        <div class="tech-stack">
          <div class="tech-item">
            <h4>前端</h4>
            <ul>
              <li>Vue 3</li>
              <li>Element Plus</li>
              <li>Axios</li>
              <li>Vite</li>
            </ul>
          </div>
          <div class="tech-item">
            <h4>后端</h4>
            <ul>
              <li>Python</li>
              <li>Flask</li>
              <li>TinyPNG API</li>
              <li>Pillow</li>
            </ul>
          </div>
        </div>
      </div>
      
      <div class="about-section">
        <h3>使用说明</h3>
        <ol>
          <li>在首页点击上传区域或拖拽图片到上传区域</li>
          <li>选择压缩方式（TinyPNG API 或本地压缩）</li>
          <li>点击"开始压缩"按钮</li>
          <li>等待压缩完成后，可以查看压缩结果</li>
          <li>点击"下载"按钮下载单张图片，或点击"下载全部图片"批量下载</li>
        </ol>
      </div>
      
      <div class="about-section">
        <h3>注意事项</h3>
        <p>如果选择使用 TinyPNG API 进行压缩，需要在后端配置有效的 API 密钥。</p>
        <p>本地压缩模式不需要 API 密钥，但压缩效果可能不如 TinyPNG API。</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

<style scoped>
.about-container {
  max-width: 800px;
  margin: 0 auto;
}

.about-card {
  padding: 2rem;
}

h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #303133;
}

.about-section {
  margin-bottom: 2rem;
}

h3 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ebeef5;
  color: #409EFF;
}

p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #606266;
}

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: #606266;
}

li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.tech-stack {
  display: flex;
  gap: 2rem;
}

.tech-item {
  flex: 1;
}

h4 {
  margin-bottom: 0.5rem;
  color: #303133;
}
</style>